<template>
  <a-form-model
    ref="formComp"
    :model="formData"
    class="AsteriskAfter newEditStyle rightDrawerWithoutCol newEditEcuForm"
    layout="horizontal"
  >
    <a-row :gutter="20" v-if="editRecord.id">
      <a-col :md="24" :sm="24">
        <a-form-model-item :label="$t('DictionaryEncoding')">
          <a-input
            v-model.trim="formData.dictCode"
            :placeholder="$t('pleaseInput')+$t('DictionaryEncoding')"
            :maxLength="50"
            readOnly
          ></a-input>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="20" v-if="!editRecord.id">
      <a-col :md="24" :sm="24">
        <a-form-model-item :label="$t('DictionaryEncoding')">
          <a-select
            v-model.trim="formData.dictCode"
            :placeholder="$t('pleaseInput')+$t('DictionaryEncoding')"
            show-search
            :allow-clear="true"
          >
            <a-select-option v-for="item in editRecord.dictCodes" :title="item.code" :key="item.code" :value="item.code">
              {{ item.name }} ({{item.code}})
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="20">
      <a-col :md="24" :sm="24">
        <a-form-model-item :label="$t('DictionaryItemName')">
          <a-input v-model.trim="formData.name" :placeholder="$t('pleaseInput')+$t('DictionaryItemName')" :maxLength="50" allowClear></a-input>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="20">
      <a-col :md="24" :sm="24">
        <a-form-model-item :label="$t('desc')">
          <custom-text-area
            @change="formData.remarks = $event"
            :val="formData.remarks"
            :rows="5"
            :max-len="200"
            :placeholder="$t('pleaseInput')+$t('desc')"
          ></custom-text-area>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="20">
      <a-col :md="24" :sm="24">
        <a-form-model-item :label="$t('value')">
          <a-input 
          v-model.trim="formData.value" 
          :placeholder="$t('pleaseInput')+$t('value')" 
          allowClear></a-input>
        </a-form-model-item>
      </a-col>
    </a-row>
  </a-form-model>
</template>
<script>
import CustomTextArea from '@/components/CustomTextArea/index.vue'
export default {
  name: '',
  components: {
    CustomTextArea
  },
  props: {
    editRecord: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      formData: {
        id: '',
        name: '',
        remarks: '',
        value: '',
        dictCode: ''
      }
    }
  },
  watch: {
    editRecord: {
      handler (val) {
        this.$nextTick(() => {
          Object.keys(this.formData).forEach((key) => {
            if (typeof val[key] !== 'undefined') {
              this.formData[key] = val[key]
            }
          })
        })
        console.log(this.editRecord.dictCodes)
      },
      immediate: true
    }
  },
  methods: {
    // 获取表单中的数据
    getFormData() {
      return new Promise((resolve, reject) => {
        const data = this.formData
        this.$refs.formComp.validate((valid) => {
          if (!valid) {
            reject(valid)
          }
          resolve(data)
        })
      })
    }
  }

}
</script>
<style scoped></style>
